<template>
  <div>
    <el-dropdown @click="handleClick" trigger="click">
      <div class="avatar">
        <img src="@/assets/images/avatar.gif" alt="avatar" />
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>
            <el-icon><User /></el-icon>
            个人信息
          </el-dropdown-item>
          <el-dropdown-item>
            <el-icon><Edit /></el-icon>
            修改信息
          </el-dropdown-item>
          <el-dropdown-item divided @click="logout">
            <el-icon><SwitchButton /></el-icon>
            退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import {useRouter} from "vue-router"
import {mainStore} from "@/stores"
let handleClick = () => {};
let router =useRouter()
let mStore = mainStore()
let logout = () => {
  ElMessageBox.confirm(
    "你确定退出登录吗",
    "温馨提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      mStore.$patch((state)=>{
        state.token=""
        state.userinfo={}
      })
      router.replace({
        name:"login"
      })
      ElMessage({
        type: "success",
        message: "退出成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消登录",
      });
    });
};
</script>

<style lang="scss" scoped>
.avatar {
  width: 40px;
  height: 40px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 50%;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>